<template>
	<view class="page flex-col">
		<view class="group_1 flex-col">
			<view class="changeTab-wrap">
				<view class="changeTab-msg" @click="btn(item, index)" :class="active == index ? 'active' : ''"
					v-for="(item, index) in tablist" :key="index">
					<uni-badge class="uni-badge-left-margin" :max-num="99" :text="item.num" absolute="rightTop"
						size="small">
						<view class="box"><text class="box-text">{{ item.tit }}</text></view>
					</uni-badge>
				</view>
			</view>
			<view class="" style="height: 80rpx;">

			</view>
			<view style="margin: 50rpx auto" v-if="list.length != 0">
				<view class="image-text_1" v-for="(item, index) in list" @click="look(item)" :key="index">

					<view class="text-group_1 flex-col">
						<view class="text_8" style="display: flex;">
							<view class="text_8-left">投诉人：</view>
							<view class="text_8-right">{{ item.name }} </view>
						</view>
						<view class="text_8" style="display: flex;">
							<view class="text_8-left">投诉人电话：</view>
							<view class="text_8-right">{{ item.phone }} </view>
						</view>

						<view class="text_8" style="display: flex;">
							<view class="text_8-left">投诉内容：</view>
							<view class="text_8-right">{{ item.memo }} </view>
						</view>
						<view class="text_8" style="display: flex;">
							<view class="text_8-left">投诉时间：</view>
							<view class="text_8-right">{{ item.createTime }} </view>
						</view>
						<!-- <view class="text_8" style="display: flex;" v-if="item.deal">
							<view class="text_8-left">投诉回复：</view>
							<view class="text_8-right">{{ item.deal }} </view>
						</view> -->
						<!-- <view class="text_9"  v-if="item.state==1">
							查看回复内容
						</view> -->

					</view>

				</view>

			</view>
			
			<view style="padding: 100rpx; text-align: center" v-else>
				暂无数据
			</view>
		</view>


	</view>

	<!-- <Tabbar :current="1" :all="pagesData.all" /> -->
</template>

<script>
	import {
		complaintList
	} from '@/api/togeterRich/index.js'
	export default {
		data() {
			return {
				list: [],
				serchData: {
					"state": "0", // 投诉建议 0 未处理 1 已处理
					"page": 1,
					"limit": 10,
				},

				active: 0,
				tablist: [{
						tit: '未处理',
					},
					{
						tit: '已处理',
					}
				]
			}

		},
		onLoad() {
			uni.hideLoading()
			this.msgInit()
		},
		onReachBottom() {
			this.serchData.page++;
			this.msgInit()
		},
		methods: {
			look(item){
				let objStr = JSON.stringify(item);
				uni.navigateTo({
				    url: '/pagesA/complaint/info?data=' + encodeURIComponent(objStr)
				});
				
			},
			btn(item, e) {
				this.serchData.state = e+''
				this.serchData.page = 1
				this.active = e
				this.list = []
				this.msgInit()
			},
			msgInit() {

				complaintList(this.serchData).then(res => {

					this.list = this.list.concat(res.data.list);
					console.log(res, '这是啥啥的')
				})

			}

		}
	}
</script>

<style lang="scss">
	
	.text-group_1{
		position: relative;
		.text_9{
	
			position: absolute;
			top: 0rpx;
			right: 10rpx;
			color: $maincolor;
			font-size: 24rpx;
		}
	}
	.text_8{
		display: flex;
		.text_8-left{
			width: 30%;
		}
		.text_8-righ{
			width: 70%;
							word-wrap: break-word;white-space: normal;
		}
	}
	.text_7 {
		font-size: 26rpx
	}

	.image-text_1 {
		width: 95%;
		margin: 0 auto;
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx;

		margin-bottom: 20rpx;
		font-size: 28rpx;
		border-bottom: 1px solid #f5f5f5;
	}

	.msgInfo {
		.msg-close {
			position: absolute;
			width: 60rpx;
			height: 60rpx;
			right: 20rpx;
			top: 10rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		position: relative;
		width: 690rpx;
		height: 800rpx;
		background: #fff;
		padding: 60rpx;
		border-radius: 20rpx;

		.okRead {
			line-height: 100rpx;
			width: 82%;
			position: absolute;
			bottom: 50rpx;
		}

		.msgInfo-tit {
			text-align: center;
			font-size: 38rpx;
			font-weight: 500;
		}

		.msgInfo-msg {
			height: 360rpx;
			overflow-y: scroll;
			// text-align: center;
			font-size: 28rpx;
			word-wrap: break-word;
			/* 旧版浏览器兼容性 */
			overflow-wrap: break-word;
			/* 标准属性 */
			word-break: break-all;
		}
	}

	.active {
		border-bottom: 2rpx solid $maincolor;
		// background: #;
		color: $maincolor !important;
		// border-radius/: 20rpx;
	}

	.changeTab-wrap {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin: 0 auto;
		position: fixed;
		top: 0;
		background: #fff;

		.changeTab-msg {
			color: #000;
			text-align: center;

			width: 30%;
			line-height: 80rpx;
		}
	}

	.wrap {
		margin: 20rpx auto;
	}
</style>